import React, { useState, useEffect } from 'react'
import { Row, Col, FloatButton, message } from 'antd'
import { DownloadOutlined, FileTextOutlined, ExportOutlined } from '@ant-design/icons'
import PendulumCanvas from './PendulumCanvas/PendulumCanvas'
import CameraView from './CameraView/CameraView'
import ControlPanel from './ControlPanel/ControlPanel'
import DataCharts from './DataCharts/DataCharts'
import LogPanel from './LogPanel/LogPanel'
import StatusBar from './StatusBar/StatusBar'
import { WebSocketProvider } from '../hooks/useWebSocket'
import { ExportUtils } from '../utils/exportUtils'

const PendulumExperimentPlatform = () => {
  const [experimentGroups, setExperimentGroups] = useState([])

  // 模拟实验数据（在实际应用中，这些数据会来自WebSocket或其他数据源）
  useEffect(() => {
    // 这里可以从localStorage或其他地方加载实验数据
    const savedData = localStorage.getItem('pendulum_experiment_data')
    if (savedData) {
      try {
        setExperimentGroups(JSON.parse(savedData))
      } catch (error) {
        console.error('加载实验数据失败:', error)
      }
    }
  }, [])

  // 导出CSV
  const handleExportCSV = () => {
    try {
      ExportUtils.exportToCSV(experimentGroups)
    } catch (error) {
      console.error('导出CSV失败:', error)
      message.error('导出CSV失败')
    }
  }

  // 导出JSON
  const handleExportJSON = () => {
    try {
      ExportUtils.exportToJSON(experimentGroups)
    } catch (error) {
      console.error('导出JSON失败:', error)
      message.error('导出JSON失败')
    }
  }

  // 生成报告
  const handleGenerateReport = () => {
    try {
      ExportUtils.generateReport(experimentGroups)
    } catch (error) {
      console.error('生成报告失败:', error)
      message.error('生成报告失败')
    }
  }

  return (
    <WebSocketProvider>
      <div style={{ maxWidth: '2000px', margin: '0 auto' }}>
        <Row gutter={[24, 24]}>
          {/* 左侧：单摆动画区域 */}
          <Col xs={24} lg={8}>
            <PendulumCanvas />
          </Col>

          {/* 中间：摄像头和控制面板 */}
          <Col xs={24} lg={8}>
            <Row gutter={[0, 24]}>
              <Col span={24}>
                <CameraView />
              </Col>
              <Col span={24}>
                <ControlPanel />
              </Col>
            </Row>
          </Col>

          {/* 右侧：图表和日志 */}
          <Col xs={24} lg={8}>
            <Row gutter={[0, 24]}>
              <Col span={24}>
                <DataCharts />
              </Col>
              <Col span={24}>
                <LogPanel />
              </Col>
            </Row>
          </Col>
        </Row>

        {/* 底部状态栏 */}
        <Row style={{ marginTop: 24 }}>
          <Col span={24}>
            <StatusBar />
          </Col>
        </Row>

        {/* 浮动导出按钮组 */}
        <FloatButton.Group
          trigger="hover"
          type="primary"
          style={{ right: 24 }}
          icon={<ExportOutlined />}
          tooltip="数据导出"
        >
          <FloatButton
            icon={<DownloadOutlined />}
            tooltip="导出CSV"
            onClick={handleExportCSV}
          />
          <FloatButton
            icon={<DownloadOutlined />}
            tooltip="导出JSON"
            onClick={handleExportJSON}
          />
          <FloatButton
            icon={<FileTextOutlined />}
            tooltip="生成报告"
            onClick={handleGenerateReport}
          />
        </FloatButton.Group>
      </div>
    </WebSocketProvider>
  )
}

export default PendulumExperimentPlatform
